<template>
  <div style="height: calc(100vh - 40px);">
    <MyBar>
      <ElButton :icon="ElIconPlus" size="small" type="primary" plain @click="onNewPoint">新建位置</ElButton>
    </MyBar>

    <DialogPointEdit
      v-if="editingPoint"
      v-model:model-value="pointEditing"
      :point="editingPoint"
      @confirm="editConfirm"
      @delete="editDelete"/>
    
    <div flex style="height: calc(100vh - 80px);">
      <ElTabs tabPosition="left" v-model:model-value="tabGroup">
        <el-tab-pane label="位置组" name="" :disabled="true">
          <div></div>
        </el-tab-pane>
        <ElTabPane
          v-for="(item, index) in positionGroupNames" :key="index"
          :label="item"
          :name="item"
          >
          <el-table :border="true" :data="getPositionsOfGroup(item)"
            style="width: 600px; height: calc(100vh - 80px);" mb
            @row-click="onEditPoint">
            <el-table-column label="名称" width="150">
              <template #default="scope">
                <!-- <el-input size="small" v-model="scope.row.name" style="width: 120px" placeholder="坐标点名称" /> -->
                <div>{{ getPointDisplayName(scope.row) }}</div>
              </template>
            </el-table-column>
          </el-table>
        </ElTabPane>
      </ElTabs>
      
    </div>

  </div>
</template>

<script setup lang="ts">
import { TypeMathPoint } from '~/models/types';
import type { VarInit } from "~/models/graph/data/var_init";
import { oProject } from '~/models/Project';

const tabGroup = ref('未分组')
const globals = computed(() => oProject.value.storage.globals)
const points = computed(() => globals.value.filter( x => x.type.is(TypeMathPoint)))

const positionGroupNames = computed(() => {
  const groupArr = points.value.map(x => x.name.split('_')).filter(arr => arr.length > 1).map(arr => arr[0])
  groupArr.push('未分组')
  return Array.from(new Set(groupArr))
})

// In Table
function getPositionsOfGroup(group: string) {
  if (group === '未分组') {
    return points.value.filter(point => point.name.indexOf('_') < 0)
  }
  return points.value.filter(point => {
    const arr = point.name.split('_')
    return arr.length > 1 && arr[0] === group
  })
}

function getPointDisplayName(point: VarInit) {
  const pointIndex = point.name.indexOf('_')
  if (pointIndex < 0) {
    return point.name
  }
  else {
    return point.name.slice(pointIndex+1)
  }
}



// 编辑点
const pointEditing = ref(false)
const editingPoint = ref(null as null | VarInit)
function onNewPoint() {
  const data: VarInit = {
    name: '',
    type: TypeMathPoint,
    initialValue: TypeMathPoint.default
  }
  editingPoint.value = data
  pointEditing.value = true
}
function onEditPoint(point: VarInit) {
  editingPoint.value = point
  pointEditing.value = true
}
function editConfirm() {
  if(editingPoint.value && (points.value.indexOf(editingPoint.value) < 0)) {
    globals.value.push(editingPoint.value)
  }
}
function editDelete() {
  if (!editingPoint.value) {
    return
  }
  lodash.remove(globals.value, x => x === editingPoint.value)
}
</script>